<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电商组件界面</title>
    <link rel="stylesheet" 
    href="https://cdn.bootcdn.net/ajax/libs/weui/2.5.4/style/weui.min.css ">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/mark.css">
</head>
<body>
   <div class="page">
    <div class="page__hd">
        <div class="weui-flex head-con">
            <div class="weui-flex__item weui-flex__item_left">
                <div class="placeholder">
                    <a href="">
                        <span class="icon icon-109"></span>
                    </a>
                </div>
            </div>
            <div class="weui-flex__item"><div class="placeholder">产品</div></div>
            <div class="weui-flex__item weui-flex__item_right">
                <div class="placeholder">
                    <a href="">
                        <span class="icon icon-40"></span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="page__db">
        <ul class="weui-mark">
            <li>
                <a href="product_detail.html">
                    <div class="weui-mark__img" style="background-image:url(./images/pic.jpg)">
                    </div>
                    <!-- weui-mark__rt 右上角标签在组件中的作用，组件样式 -->
                    <!-- 全站 通用样式 bg-green bg-yellow .... -->
                    <div class="weui-mark__rt bg-green">免费</div>
                    <div class="weui-mark__lb">更新到101集</div>
                    <div class="weui-mark__vip">
                        <span class="weui-mark__lt bg-green">自制剧</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="product_detail.html">
                    <div class="weui-mark__img" style="background-image:url(./images/pic.jpg)">
                    </div>
                    <!-- weui-mark__rt 右上角标签在组件中的作用，组件样式 -->
                    <!-- 全站 通用样式 bg-green bg-yellow .... -->
                    <div class="weui-mark__rt bg-green">免费</div>
                    <div class="weui-mark__lb">更新到101集</div>
                    <div class="weui-mark__vip">
                        <span class="weui-mark__lt bg-green">自制剧</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="product_detail.html">
                    <div class="weui-mark__img" style="background-image:url(./images/pic.jpg)">
                    </div>
                    <!-- weui-mark__rt 右上角标签在组件中的作用，组件样式 -->
                    <!-- 全站 通用样式 bg-green bg-yellow .... -->
                    <div class="weui-mark__rt bg-green">免费</div>
                    <div class="weui-mark__lb">更新到101集</div>
                    <div class="weui-mark__vip">
                        <span class="weui-mark__lt bg-green">自制剧</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="product_detail.html">
                    <div class="weui-mark__img" style="background-image:url(./images/pic.jpg)">
                    </div>
                    <!-- weui-mark__rt 右上角标签在组件中的作用，组件样式 -->
                    <!-- 全站 通用样式 bg-green bg-yellow .... -->
                    <div class="weui-mark__rt bg-green">免费</div>
                    <div class="weui-mark__lb">更新到101集</div>
                    <div class="weui-mark__vip">
                        <span class="weui-mark__lt bg-green">自制剧</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="product_detail.html">
                    <div class="weui-mark__img" style="background-image:url(./images/pic.jpg)">
                    </div>
                    <!-- weui-mark__rt 右上角标签在组件中的作用，组件样式 -->
                    <!-- 全站 通用样式 bg-green bg-yellow .... -->
                    <div class="weui-mark__rt bg-green">免费</div>
                    <div class="weui-mark__lb">更新到101集</div>
                    <div class="weui-mark__vip">
                        <span class="weui-mark__lt bg-green">自制剧</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="product_detail.html">
                    <div class="weui-mark__img" style="background-image:url(./images/pic.jpg)">
                    </div>
                    <!-- weui-mark__rt 右上角标签在组件中的作用，组件样式 -->
                    <!-- 全站 通用样式 bg-green bg-yellow .... -->
                    <div class="weui-mark__rt bg-green">免费</div>
                    <div class="weui-mark__lb">更新到101集</div>
                    <div class="weui-mark__vip">
                        <span class="weui-mark__lt bg-green">自制剧</span>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div> 
<div class="page__ft">
    <div role="tablist" aria-label="选项卡标题" class="weui-tabbar">
        <div id="tab1" role="tab" aria-labelledby="t1_title" aria-describedby="t1_tips" aria-selected="true" aria-controls="panel1" class="weui-tabbar__item weui-bar__item_on" wah-hotarea="click">
            <i class="icon icon-27 f27"></i>
            <p id="t1_title" aria-hidden="true" class="weui-tabbar__label">首页</p>
        </div>
        <div id="tab2" role="tab" aria-labelledby="t2_title" aria-selected="false" aria-controls="panel2" class="weui-tabbar__item" wah-hotarea="click">
            <div id="t1_tips" aria-hidden="true" style="display: inline-block; position: relative;">
                <i class="icon icon-28 f27"></i>
                <span class="weui-badge" style="position: absolute; top: -2px; right: -13px;">8</span>
            </div>
            <p aria-hidden="true" id="t2_title" class="weui-tabbar__label">购物车</p>
        </div>
        <div id="tab3" role="tab" aria-labelledby="t3_title" aria-describedby="t3_tips" aria-selected="false" aria-controls="panel3" class="weui-tabbar__item" wah-hotarea="click">
            <div id="t3_tips" aria-hidden="true" style="display: inline-block; position: relative;">
                <i class="icon icon-29 f27"></i>
                <span class="weui-badge weui-badge_dot" role="img" alt="new" style="position: absolute; top: 0; right: -6px;"></span>
            </div>
            <p id="t3_title" aria-hidden="true" class="weui-tabbar__label">产品</p>
        </div>
        <div id="tab4" role="tab" aria-labelledby="t4_title" aria-selected="false" aria-controls="panel4" class="weui-tabbar__item" wah-hotarea="click">
            <i class="icon icon-30 f27"></i>
            <p class="weui-tabbar__label" aria-hidden="true" id="t4_title">我</p>
        </div>
    </div>
</div>
</div>
<script>
    // 我们写完的代码，未来发布的时候也要压缩
</script>
</body>
</html>